<title>消息详情</title>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body LAY_message_detail" id="LAY_message_detail_view"></div>

    <script type="text/html" id="LAY_message_detail_tpl">
      <div class="LAY_wisdom_title">
        <h3 class="LAY_wisdom_title_line">基本信息</h3>
      </div>

      <div class="layui-row layui-col-space20">
        <div class="layui-col-md6">
          <label class="layui-form-label">消息id</label>
          <div class="layui-input-block">{{d.messageId || ''}}</div>
        </div>
        <div class="layui-col-md6">
          <label class="layui-form-label">创建时间</label>
          <div class="layui-input-block">{{d.createdTime || ''}}</div>
        </div>
        <div class="layui-col-md6">
          <label class="layui-form-label">计划推送时间</label>
          <div class="layui-input-block">{{d.effectTime || ''}}</div>
        </div>
        <div class="layui-col-md6">
          <label class="layui-form-label">推送状态</label>
          <div class="layui-input-block">{{d.statusDesc || ''}}</div>
        </div>
        <div class="layui-col-md6">
          <label class="layui-form-label">实际推送时间</label>
          <div class="layui-input-block">{{d.sentTime || ''}}</div>
        </div>
        <div class="layui-col-md12">
          <label class="layui-form-label">消息主题</label>
          <div class="layui-input-block">{{d.title || ''}}</div>
        </div>
      </div>

      <hr>

      <div class="LAY_wisdom_title">
        <h3 class="LAY_wisdom_title_line">消息内容</h3>
      </div>

      <div class="layui-row layui-col-space20">
        <div class="layui-col-md12">
          <p class="LAY_message_detail_content">{{d.content}}</p>
        </div>
      </div>

      <hr>

      <div class="LAY_wisdom_title">
        <h3 class="LAY_wisdom_title_line">目标机构</h3>
      </div>

      <table lay-filter="LAY_message_detail_table">
        <thead>
        <tr>
          <th lay-data="{field:'orgSimpleName', align:'center'}">机构简介</th>
          <th lay-data="{field:'parentOrgSimpleName', align:'center'}">上级机构简称</th>
        </tr>
        </thead>
        <tbody>
        {{#  layui.each(d.orgs, function(index, item){ }}
        <tr>
          <td>{{item.orgSimpleName || ''}}</td>
          <td>{{item.parentOrgSimpleName || ''}}</td>
        </tr>
        {{#  }); }}
        </tbody>
      </table>

      <div class="LAY_message_detail_btn_group">
        <button class="layui-btn layui-btn-primary LAY_message_detail_btn_back">返回</button>
        <button class="layui-btn LAY_message_detail_btn_modify" data-id="{{d.messageId}}" data-status="{{d.status}}">修改</button>
        {{# if (d.status == 'READY') { }}
        <button class="layui-btn LAY_message_detail_btn_modify" data-id="{{d.messageId}}" data-status="{{d.status}}">修改</button>
        {{# } }}
        {{# if (d.status == 'EDITING') { }}
        <button class="layui-btn LAY_message_detail_btn_edit" data-id="{{d.messageId}}" data-status="{{d.status}}">继续编辑</button>
        {{# } }}
      </div>
    </script>
  </div>
</div>

<script>
  layui.use(['admin', 'element', 'laypage', 'laytpl', 'table', 'getmenus'], function () {
    var $ = layui.$,
            admin = layui.admin,
            setter = layui.setter,
            view = layui.view,
            table = layui.table,
            laytpl = layui.laytpl,
            laypage = layui.laypage,
            element = layui.element,
            getmenus = layui.getmenus,
            router = layui.router(),
            messageId = router.search.messageId;

    getDetail();

    function getDetail() {
      admin.req({
        url: setter.url + '/message/detail',
        type: 'GET',
        data: {
          messageId: messageId
        },
        done: function (res) {
          var data = res.data || {};

          admin.req({
            url: setter.url + '/org/liteList',
            type: 'GET',
            done: function (_res) {
              var _data = _res.data || [];
              var orgs = [];

              layui.each(_data, function (index, item) {
                if (data.existsDeliveryTargets.indexOf(item.orgCode) > -1) {
                  orgs.push(item);
                }
              });

              data.orgs = orgs;
              renderData(data, function () {
                table.init('LAY_message_detail_table');
                initPermission();
                initEvents();
              });
            }
          });
        }
      });
    }

    function initEvents() {
      $('.LAY_message_detail_btn_back').off('click').on('click', function () {
        admin.events.back();
      });

      $('.LAY_message_detail_btn_edit').off('click').on('click', function () {
        var messageId = $(this).data('id');
        layerShow('edit', messageId, 'EDITING');
      });

      $('.LAY_message_detail_btn_modify').off('click').on('click', function () {
        var messageId = $(this).data('id');
        layerShow('modify', messageId, 'READY');
      });
    }

    function renderData(data, callback) {
      var getTpl = $('#LAY_message_detail_tpl').html();

      if (!getTpl) {
        return;
      }

      laytpl(getTpl).render(data, function(html){
        $('#LAY_message_detail_view').html(html);

        if (typeof(callback) === 'function') {
          callback();
        }
      });
    }

    // 显示编辑页
    function layerShow(optType, messageId, status) {
      var btn = ['提交', '暂存', '取消'];

      if (status == 'READY') {
        btn = ['提交', '取消'];
      }

      var settings = {
        type: 2
        ,title: messageId ? (optType == 'modify' ? '修改消息推送' : '继续编辑推送消息') : '新增消息推送'
        ,area: ['80%', '680px']
        ,content: '#/message/form/messageId=' + messageId
        ,btn: btn //只是为了演示
        ,yes: function(index, layero){
          var iframe = getIframeWindow(layero);
          var data = iframe.getData();
          var optCode = 1;

          if (optType == 'modify') {
            optCode = 2
          }

          data = $.extend(true, {}, data, {
            optCode: optCode,
            messageId: messageId
          });

          updataMessage(data, function () {
            layer.msg('操作成功', {
              icon: 1,
              time: 1500,
              shade: [0.3, '#393D49']
            });

            getDetail();
            layer.close(index);
          });

          return false;
        }
      }

      if (status == 'READY') {
        settings.btn2 && delete settings.btn2;
      } else {
        settings.btn2 = function(index, layero){
          var iframe = getIframeWindow(layero);
          var data = iframe.getData();

          data = $.extend(true, {}, data, {
            optCode: 0,
            messageId: messageId
          });

          updataMessage(data, function () {
            layer.msg('操作成功', {
              icon: 1,
              time: 1500,
              shade: [0.3, '#393D49']
            });

            getDetail();
            layer.close(index);
          });

          return false;
        }
      }

      var index = layer.open(settings);
    }

    // 获取iframe
    function getIframeWindow(layero) {
      var win = window[layero.find('iframe')[0]['name']];
      return win;
    }

    // 变更消息
    function updataMessage(params, callback) {
      var url = '/message/create';

      if (params.messageId) {
        url = '/message/update'
      }

      admin.req({
        url: setter.url + url,
        type: 'POST',
        data: params,
        done: function () {
          if (typeof(callback) == 'function') {
            callback();
          }
        }
      });
    }

    function initPermission() {
      // 消息管理-编辑
      var editBtn = $('.LAY_message_detail_btn_edit');

      if (!getmenus.messageEdit) {
        editBtn.remove();
      }

      // 消息管理-修改
      var modifyBtn = $('.LAY_message_detail_btn_modify');

      if (!getmenus.messageUpdate) {
        modifyBtn.remove();
      }
    }

  });
</script>